<template>
	<view class="content">
		<view class="bigBox">
			<view class="tagView">
				<uni-tag class="tagItem" v-for="(item,index) in bookGroupList"
					:type="item.id==book_group_id?'primary':''" :text="item.name" @click="changeBookGroup(item.id)" />

			</view>
			<view class="searchBox">
				<image src="/static/book/搜索.png" alt="" srcset="" mode="widthFix" />
				<input type="text" class="search" placeholder="请输入书名" v-model="bookName" />
				<text class="searchBtn" @click="search">搜索</text>
			</view>
			<view class="booksBox">
				<view class="booksItem" v-for="booksItems in bookArray" :key="booksItems.id">
					<image :src="booksItems.cover_url" alt="" mode="widthFix" />
					<view class="title">
						<text class="booksName">{{booksItems.name}}</text>
					</view>
					<span class="title2">
						<image src="/static/home/画板2.png" alt="" mode="widthFix" />
						{{ (booksItems.tags&&booksItems.tags[0]=='[')?booksItems.tags.substring(1,booksItems.tags.length-1):booksItems.tags}}
					</span>
					<button @click="goto('/pages/index/book/bookInfo',booksItems.book_id)">推 广</button>
				</view>
				<text v-if="moreFlag==true" class="moreText" @click="clickLoadMore">点击加载更多</text>
				<text v-else class="moreText">没有更多了</text>
			</view>

		</view>
	</view>
</template>

<script>
	import api from '../../../api/api.js'
	export default {
		data() {
			return {
				bookName: '', //书名
				bookArray: [], //书单列表
				pageNum: 1, //第几页
				pageSize: 20, //每页多少数据
				moreFlag: true, //是否还有更多
				book_group_id: 1, //第三方书方id
				bookGroupList: [
					{
						id: 3,
						name: "朵米故事会"
					},
					{
							id: 1,
							name: "黑岩故事会"
						},
					{
						id: 4,
						name: "大鱼故事会"
					},
					{
						id: 2,
						name: "惊读故事会"
					},
				]
			}
		},
		methods: {
			changeBookGroup(id) {
				this.book_group_id = id
				this.pageNum = 1
				this.bookArray = []
				this.getBooks(this.book_group_id, 1)
			},
			goto(url, book_id) {
				if (book_id) {
					url = url + '?book_id=' + book_id + '&source=' + this.book_group_id
				}
				uni.navigateTo({
					url: url
				})
			},
			async getBooks(id, pageNum, bookName) {
				const self = this
				this.pageNum = pageNum
				await api.searchBook({
					pageNum: pageNum,
					pageSize: self.pageSize,
					bookName: bookName,
					source: self.book_group_id
				}).then(res => {
					console.log(res)
					if (res.code == 200 && res.data && res.data.length > 0) {
						self.bookArray.push(...res.data)
						res.data.length < self.pageSize ? self.moreFlag = false : self.moreFlag = true

					}
				})
			},
			async search() {
				uni.showLoading({
					title: "搜索中"
				})
				this.bookArray = []
				await this.getBooks(this.book_group_id, 1, this.bookName)
				uni.hideLoading()
			},
			async clickLoadMore(e) {
				uni.showLoading({
					title: "加载中"
				})
				await this.getBooks(this.book_group_id, this.pageNum + 1, this.bookName)
				uni.hideLoading()
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.book_group_id = option.book_group_id
		},
		mounted() {
			this.getBooks(this.book_group_id, 1)
		}
	}
</script>


<style scoped>
	.tagItem {
		margin: 6px;
		display: inline-block;
	}

	.tagView {
		width: 100%;
		padding: 0 4%;
		box-sizing: border-box;
	}

	.moreText {
		color: aliceblue;
		display: block;
		text-align: center;
		margin-top: 10px;
	}

	.searchBtn {
		position: absolute;
		top: 50%;
		width: 30px;
		transform: translateY(-50%);
		right: 0;
		font-size: 14px;
		color: rgba(229, 229, 229, 1);
	}

	.searchBox {
		width: 92%;
		margin: 0 auto;
		position: relative;
	}

	.searchBox image {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 50%;
		left: 9px;
		transform: translateY(-50%);
	}

	.search {
		width: calc(100% - 50px);
		height: 30px;
		box-sizing: border-box;
		padding-left: 30px;
		padding-right: 10px;
		margin-bottom: 14px;
		background-color: red;
		border-radius: 51px;
		background: rgba(56, 56, 56, 1);
		border: 0.5px solid rgba(128, 128, 128, 1);
		color: rgba(166, 166, 166, 1);
	}

	.uni-mt-5 {
		font-size: 10px;
		line-height: 11.72px;
	}

	.bigBox {
		width: 100%;
		margin: 0 auto;
		padding: 20px 0;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: rgba(34, 34, 34, 1);
	}

	/* 书item样式 */
	.title {
		display: inline-block;
		position: absolute;
	}

	.booksItem image {
		width: 80px;
		height: 100px;
		margin-right: 10px;
	}

	.booksItem button {
		position: absolute;
		right: 9px;
		bottom: 10px;
		width: 58px;
		height: 24px;
		line-height: 24px;
		border-radius: 16.53px;
		background: rgba(18, 205, 217, 1);
		border: 0.74px solid rgba(0, 186, 173, 1);
		box-shadow: 0px 0.74px 1.49px rgba(67, 207, 124, 0.25);
		font-size: 10.4px;
		color: rgba(255, 255, 255, 1);
	}

	.booksItem .title2 image {
		margin-left: 4px;
		width: 10px;
		height: 10px;
	}

	.title2 {
		display: inline-block;
		height: 18px;
		width: calc(100% - 150px);
		    white-space: nowrap; 
		    overflow: hidden;
		    text-overflow: ellipsis;
		background: linear-gradient(135deg, rgba(18, 205, 217, 0.23) 0%, rgba(18, 205, 217, 0) 100%);
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
		/* line-height: 28px; */
		vertical-align: bottom;
		margin-bottom: 5px;
	}

	.title span {
		display: inline-block;
		width: 50px;
		height: 22px;
		font-size: 6px;
		line-height: 7.03px;
		color: rgba(255, 255, 255, 1);
		background: url(/static/home/画板1.png) no-repeat center center;
		background-size: 100%;
		text-align: right;
		line-height: 28px;
		padding-right: 4px;
		margin-left: 4px;
	}

	.booksItem .booksName {
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		color: rgba(100, 217, 238, 1);
	}


	.booksItem {
		width: 100%;
		height: 126px;
		/* height: 100px; */
		margin: 10px 0;
		border-radius: 5px;
		position: relative;
		padding: 10px;
		box-sizing: border-box;
		background-color: rgba(56, 56, 56, 1);
	}

	.booksBox {
		box-sizing: border-box;
		padding-left: 4%;
		padding-right: 4%;
		width: 100%;
		height: calc(100vh - 100px);
		overflow-y: auto;
		margin: 0 auto;
	}
</style>